<!-- 工作台 -->
<template>
  <div style="background: #f3f6f9;height: 100%;margin: -10px;">
    <el-row class="shadow" style="background: #fff;height: 25%;margin-bottom: 15px;">
      <div style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
        <div class="hbox">
          <div class="hboxxian"></div>
          <div class="hboxhcss">
            同步异常统计
          </div>
        </div>
      </div>
      <div
        style="display: flex;align-items: flex-start;justify-content: space-between;width: 100%;height: calc(100% - 18px);">
        <router-link class="boxn" to="/projectinfo/projectBaseInfo">
          <div style="background: rgb(253, 226, 226);border-radius: 5px;margin-bottom: 15px;">
            <div
              style="margin: 5px;background:#F56C6C;border-radius: 5px;text-align: center;line-height: 50px;width: 50px;height: 50px;font-size: 18px;color: #fff;font-weight: 700;">
              5
            </div>
          </div>
          <div style="font-size: 14px;color: #333;max-width: 50%;text-align: center;">销售订单行项目</div>
        </router-link>
        <router-link class="boxn" to="/projectinfo/paichaPlan">
          <div style="background: rgb(253, 226, 226);border-radius: 5px;margin-bottom: 15px;">
            <div
              style="margin: 5px;background:#F56C6C;border-radius: 5px;text-align: center;line-height: 50px;width: 50px;height: 50px;font-size: 18px;color: #fff;font-weight: 700;">
              5
            </div>
          </div>
          <div style="font-size: 14px;color: #333;max-width: 50%;text-align: center;">排产计划</div>
        </router-link>
        <router-link class="boxn" to="/projectinfo/projectSale">
          <div style="background: rgb(253, 226, 226);border-radius: 5px;margin-bottom: 15px;">
            <div
              style="margin: 5px;background:#F56C6C;border-radius: 5px;text-align: center;line-height: 50px;width: 50px;height: 50px;font-size: 18px;color: #fff;font-weight: 700;">
              2
            </div>
          </div>
          <div style="font-size: 14px;color: #333;max-width: 50%;text-align: center;">订单产品</div>
        </router-link>
        <router-link class="boxn" to="/projectinfo/PaichanTask">
          <div style="background: rgb(253, 226, 226);border-radius: 5px;margin-bottom: 15px;">
            <div
              style="margin: 5px;background:#F56C6C;border-radius: 5px;text-align: center;line-height: 50px;width: 50px;height: 50px;font-size: 18px;color: #fff;font-weight: 700;">
              3
            </div>
          </div>
          <div style="font-size: 14px;color: #333;max-width: 50%;text-align: center;">工单</div>
        </router-link>
        <router-link class="boxn" to="/projectinfo/goodsSaledoGongxuUserMoney">
          <div style="background: rgb(253, 226, 226);border-radius: 5px;margin-bottom: 15px;">
            <div
              style="margin: 5px;background:#F56C6C;border-radius: 5px;text-align: center;line-height: 50px;width: 50px;height: 50px;font-size: 18px;color: #fff;font-weight: 700;">
              34
            </div>
          </div>
          <div style="font-size: 14px;color: #333;max-width: 50%;text-align: center;">报工</div>
        </router-link>
        <div class="boxn">
          <div style="background: rgb(253, 226, 226);border-radius: 5px;margin-bottom: 15px;">
            <div
              style="margin: 5px;background:#F56C6C;border-radius: 5px;text-align: center;line-height: 50px;width: 50px;height: 50px;font-size: 18px;color: #fff;font-weight: 700;">
              50
            </div>
          </div>
          <div style="font-size: 14px;color: #333;max-width: 50%;text-align: center;">原材料、组部件检测</div>
        </div>
        <div class="boxn">
          <div style="background: rgb(253, 226, 226);border-radius: 5px;margin-bottom: 15px;">
            <div
              style="margin: 5px;background:#F56C6C;border-radius: 5px;text-align: center;line-height: 50px;width: 50px;height: 50px;font-size: 18px;color: #fff;font-weight: 700;">
              115
            </div>
          </div>
          <div style="font-size: 14px;color: #333;max-width: 50%;text-align: center;">生产工艺及过程检验</div>
        </div>
        <div class="boxn">
          <div style="background: rgb(253, 226, 226);border-radius: 5px;margin-bottom: 15px;">
            <div
              style="margin: 5px;background:#F56C6C;border-radius: 5px;text-align: center;line-height: 50px;width: 50px;height: 50px;font-size: 18px;color: #fff;font-weight: 700;">
              54
            </div>
          </div>
          <div style="font-size: 14px;color: #333;max-width: 50%;text-align: center;">出厂试验</div>
        </div>
        <router-link class="boxn" to="/ordersininfos/inventoryList">
          <div style="background: rgb(253, 226, 226);border-radius: 5px;margin-bottom: 15px;">
            <div
              style="margin: 5px;background:#F56C6C;border-radius: 5px;text-align: center;line-height: 50px;width: 50px;height: 50px;font-size: 18px;color: #fff;font-weight: 700;">
              7
            </div>
          </div>
          <div style="font-size: 14px;color: #333;max-width: 50%;text-align: center;">成品信息</div>
        </router-link>
        <!-- <div class="boxn">
          <div style="background: rgb(253, 226, 226);border-radius: 5px;margin-bottom: 15px;">
            <div
              style="margin: 5px;background:#F56C6C;border-radius: 5px;text-align: center;line-height: 50px;width: 50px;height: 50px;font-size: 18px;color: #fff;font-weight: 700;">
              0
            </div>
          </div>
          <div style="font-size: 14px;color: #333;max-width: 50%;text-align: center;">评分触发失败</div>
        </div> -->
      </div>
    </el-row>
    <el-row style="height: 25%;margin-bottom: 15px;">
      <el-col :span="6" style="height: 100%;">
        <div class="shadow" style="width: calc(100% - 15px);height: 100%;background: #fff;margin-right: 15px;">
          <div style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
            <div class="hbox">
              <div class="hboxxian"></div>
              <div class="hboxhcss">
                重点成果
              </div>
            </div>
            <el-button-group>
              <el-button size="mini" :autofocus="isBotton == 1" @click="isBotton = 1">本月</el-button>
              <el-button size="mini" :autofocus="isBotton == 2" @click="isBotton = 2">本季</el-button>
              <el-button size="mini" :autofocus="isBotton == 3" @click="isBotton = 3">本年</el-button>
            </el-button-group>
          </div>
          <el-row style="height: calc(100% - 48px);margin: 15px 0;">
            <el-col style="height: 100%;" :span="12">
              <router-link to="/projectinfo/project">
                <div
                  style="height: 100%;margin-right: 5px;background: linear-gradient(180deg,#eef1fd, #fff);border-radius: 5px;padding: 10px 15px;">
                  <div style="font-size: 14px;color: #333;margin-bottom: 10px;">新增采购订单(条)</div>
                  <div style="font-size: 18px;font-weight: 700;color: #333;margin-bottom: 10px;">
                    {{isBotton == 1 ? '10' : isBotton == 2 ? '1802' : '10923'}}
                  </div>
                  <div style="font-size: 14px;color: #67C23A;">
                    {{isBotton == 1 ? '30' : isBotton == 2 ? '11' : '52'}}%
                    <i class="el-icon-caret-bottom" style="color: #67C23A;"></i>
                  </div>
                </div>
              </router-link>
            </el-col>
            <el-col style="height: 100%;" :span="12">
              <router-link to="/projectinfo/projectBaseInfo">
                <div
                  style="height: 100%;margin-left: 5px;background: linear-gradient(180deg,#e3f2fd, #fff);border-radius: 5px;padding: 10px 15px;">
                  <div style="font-size: 14px;color: #333;margin-bottom: 10px;">新增销售订单(条)</div>
                  <div style="font-size: 18px;font-weight: 700;color: #333;margin-bottom: 10px;">
                    {{isBotton == 1 ? '10' : isBotton == 2 ? '20' : '4201'}}
                  </div>
                  <div style="font-size: 14px;color: #67C23A;">
                    {{isBotton == 1 ? '30' : isBotton == 2 ? '10' : '1'}}%
                    <i class="el-icon-caret-bottom" style="color: #67C23A;"></i>
                  </div>
                </div>
              </router-link>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <el-col class="shadow" :span="18" style="height: 100%;background: #fff;">
        <div style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
          <div class="hbox">
            <div class="hboxxian"></div>
            <div class="hboxhcss">
              采购订单填报环节统计
            </div>
          </div>
          <div style="display: flex;align-items: center;">
            <el-button size="mini" icon="el-icon-star-off" style="font-weight: 700;">
              关注订单 2
            </el-button>
            <el-button size="mini" icon="el-icon-message" style="font-weight: 700;">
              未读订单 0
            </el-button>
          </div>
        </div>
        <div
          style="display: flex;align-items: center;justify-content: space-between;width: 100%;height: calc(100% - 18px);">
          <router-link to="/projectinfo/projectBaseInfo"
            style="width: 15%;height: calc(100% - 30px);display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 5px;background: linear-gradient(180deg,#F0F8FF, #fff);margin: 15px;">
            <div style="font-size: 14px;color: #333;margin-bottom: 10px;margin-top: 18px;">
              关联销售订单
            </div>
            <div style="font-size: 24px;font-weight: 700;color: #333;margin-bottom: 20px;">
              10
            </div>
          </router-link>
          <router-link to="/projectinfo/paichaPlan"
            style="width: 15%;height: calc(100% - 30px);display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 5px;background: linear-gradient(180deg,	#FAEBD7, #fff);margin: 15px;">
            <div style="font-size: 14px;color: #333;margin-bottom: 10px;margin-top: 18px;">
              指定排产计划
            </div>
            <div style="font-size: 24px;font-weight: 700;color: #333;margin-bottom: 20px;">
              10
            </div>
          </router-link>
          <router-link to="/projectinfo/projectSale"
            style="width: 15%;height: calc(100% - 30px);display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 5px;background: linear-gradient(180deg,	#7FFFD4, #fff);margin: 15px;">
            <div style="font-size: 14px;color: #333;margin-bottom: 10px;margin-top: 18px;">
              填报生产订单
            </div>
            <div style="font-size: 24px;font-weight: 700;color: #333;margin-bottom: 20px;">
              10
            </div>
          </router-link>
          <router-link to="/projectinfo/projectSale"
            style="width: 15%;height: calc(100% - 30px);display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 5px;background: linear-gradient(180deg,	#F0FFFF, #fff);margin: 15px;">
            <div style="font-size: 14px;color: #333;margin-bottom: 10px;margin-top: 18px;">
              填报生产数据
            </div>
            <div style="font-size: 24px;font-weight: 700;color: #333;margin-bottom: 20px;">
              11
            </div>
          </router-link>
          <router-link to="/projectinfo/projectBaseInfo"
            style="width: 15%;height: calc(100% - 30px);display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 5px;background: linear-gradient(180deg,#F5F5DC, #fff);margin: 15px;">
            <div style="font-size: 14px;color: #333;margin-bottom: 10px;margin-top: 18px;">
              同步订单数据
            </div>
            <div style="font-size: 24px;font-weight: 700;color: #333;margin-bottom: 20px;">
              0
            </div>
          </router-link>
          <!-- <div
            style="width: 15%;height: calc(100% - 30px);display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 5px;background: linear-gradient(180deg,	#FFE4C4, #fff);margin: 15px;">
            <div style="font-size: 14px;color: #333;margin-bottom: 10px;margin-top: 18px;">
              触发质量评分
            </div>
            <div style="font-size: 24px;font-weight: 700;color: #333;margin-bottom: 20px;">
              0
            </div>
          </div> -->
        </div>
      </el-col>
    </el-row>
    <el-row class="shadow" style="background: #fff;height:calc(50% - 30px)">
      <div ref="header" style="height: 100%;">
        <div ref="headerTop" style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
          <div class="hbox">
            <div class="hboxxian"></div>
            <div class="hboxhcss">
              网关接口访问
            </div>
          </div>
        </div>
        <el-row style="height: calc(100% - 35px);margin-top: 10px;">
          <el-col :span="6" style="height: 100%;">
            <div style="width: calc(100% - 15px);height: 100%;margin-right: 15px;overflow-y: scroll;">
              <div v-for="(item,index) in list" :key="index" :class="index != isIndex ? 'li1' : 'li2'"
                @click="onIndex(index)">
                <div :class="index == isIndex ? 'hcssn' : ''" style="font-size: 14px;">{{item.name}}</div>
                <div style="font-size: 12px;display: flex;flex-direction: column;align-items: flex-end;">
                  <div>接口总数：{{item.num}}</div>
                  <div style="margin-top: 5px;">活跃接口总数：{{item.total}}</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="18" style="height: 100%;">
            <el-table border v-loading="loading" :data="dataList" :max-height="tableMaxHeight">
              <el-table-column label="接口协议名称" align="center" prop="name">
                <template slot-scope="scope">
                  {{list[isIndex].name}}_{{scope.row.name}}
                </template>
              </el-table-column>
              <el-table-column label="接口地址" align="center" prop="url" />
              <el-table-column label="异常提醒" align="center" prop="content" />
              <el-table-column label="最后访问时间" align="center" prop="dataTime" />
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "indexPage",
    data() {
      return {
        loading: true,
        tableMaxHeight: 0,
        isBotton: 1,
        isIndex: 0,
        list: [{
            name: '电缆中间接头',
            num: '13',
            total: '13'
          },
          {
            name: '电缆终端',
            num: '16',
            total: '16'
          },
          {
            name: '中压电力电缆',
            num: '26',
            total: '26'
          },
          {
            name: 'ADSS光缆',
            num: '14',
            total: '14'
          }
        ],
        dataList: [{
            name: '成品信息',
            url: '/edge-api/edge/data/1/10006/CPRK/CPXXK',
            content: '--',
            dataTime: '2024-11-04 11:09:01'
          },
          {
            name: '文件上传',
            url: '/edge apieuge/ile/1n0006/FILE/FILE',
            content: '--',
            dataTime: '2024-11-04 11:09:10'
          },
          {
            name: '生产过程_过程检测_结果数据采集',
            url: '/edga-apiledgerdata11/10006/SCGYGCJC/GCJC',
            content: '--',
            dataTime: '2024-11-04 11:10:12'
          },
          {
            name: '生产过程_硫化_结果数据采集',
            url: '/edge apifedgerdata0006/SCGvGCJC/LH',
            content: '--',
            dataTime: '2024-11-04 11:10:43'
          },
          {
            name: '生产过程_生产环境(主绝缘部件成影车间)_结果数据采集',
            url: '/edge-apiledge/data1/10006/SCGYGCJCISCHJ',
            content: '--',
            dataTime: '2024-11-04 11:12:10'
          },
          {
            name: '生产过程_铸模_结果数据采集',
            url: '/edge apiledge/data1110006rSCGYGCJC1ZX',
            content: '--',
            dataTime: '2024-11-04 11:18:50'
          },
          {
            name: '试验监控_局部耐压试验_试验组',
            url: '/edge-api/edge/data/1/10006/CPRK/CPXXK',
            content: '--',
            dataTime: '2024-11-04 14:08:40'
          },
          {
            name: '试验监控_局部耐压试验_试验逻辑',
            url: '/edge-api/edge/expeniment/1/10006/SYSJ/JFNY/10',
            content: '--',
            dataTime: '2024-11-04 14:08:50'
          },
          {
            name: '试验监控_局部耐压试验_结果数据采集',
            url: '/edge-api/edge/expeniment/1/10006/SYSJ/JFNY/20',
            content: '--',
            dataTime: '2024-11-04 14:18:40'
          },
          {
            name: '试验监控_局部耐压试验_结果数据采集1',
            url: '/edge-api/edge/expeniment/1/10006/SYSJ/JFNY/30',
            content: '--',
            dataTime: '2024-11-04 14:18:50'
          },
        ],
        // 版本号
        version: "3.4.0",
      }
    },
    created() {
      setTimeout(() => {
        this.tableMaxHeight = this.$refs.header.offsetHeight - this.$refs.headerTop.offsetHeight - 15
        this.loading = false
      }, 500)
      window.addEventListener('resize', this.getTableHeight);
    },
    destroyed() {
      window.removeEventListener('resize', this.getTableHeight)
    },
    methods: {
      goTarget(href) {
        window.open(href, "_blank");
      },
      getTableHeight() {
        this.tableMaxHeight = this.$refs.header.offsetHeight - this.$refs.headerTop.offsetHeight - 15
      },
      onIndex(e) {
        this.isIndex = e
        this.loading = true
        setTimeout(() => {
          this.loading = false
        }, 1000)
      }
    }
  }
</script>

<style scoped lang="scss">
  .shadow {
    box-shadow: 2px 4px 7px rgba(0, 0, 0, 0.05);
    padding: 10px;
    border-radius: 5px;
  }

  .hcssn {
    font-weight: 700;
    color: #409EFF;
  }

  .li1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    border: 1px solid #EBEEF5;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .li2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    border: 1px solid #409EFF;
    background: #e8f4ff;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .boxn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 10%;
    height: 100%;
    padding-top: 30px;
    border-bottom: 4px solid #fff;
    padding-bottom: 25px;
    background: #fff;
    transition: all .5s;
  }

  .boxn:hover,
  .boxn:focus,
  .boxn:active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 10%;
    height: 100%;
    padding-top: 30px;
    border-bottom: 4px solid #409EFF;
    background: linear-gradient(#fff 30%, rgb(217, 236, 255) 100%);
    transition: all .5s;
  }

  .shadow1 {
    box-shadow: 0px 0px 20px rgb(253, 226, 226, .5);
  }

  .hbox {
    display: flex;
    align-items: center;
  }

  .hboxhcss {
    font-size: 16px;
    color: #333;
    font-weight: 600;
  }

  .hboxxian {
    width: 5px;
    height: 18px;
    background: #1890ff;
    margin-right: 5px;
    border-radius: 2px;
  }
</style>
